<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:v-bind="http://www.w3.org/1999/xhtml">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>订单详情</title>
    <base th:href="@{/}" href="/bookstore/"/>

    <link rel="stylesheet" href="static/css/minireset.css" />
    <link rel="stylesheet" href="static/css/common.css" />
    <link rel="stylesheet" href="static/css/cart.css" />
    <!-- 引入vue -->
    <script src="static/script/vue.js" type="text/javascript" charset="utf-8"></script>
    <!-- 引入axios -->
    <script src="static/script/axios.js" type="text/javascript" charset="utf-8"></script>
    <!--    引入jquery-->
    <script src="static/script/jquery-1.7.2.js" type="text/javascript" charset="utf-8"></script>
  </head>
  <body>
    <div class="header">
      <div class="w">
        <div class="header-left">
          <a href="index.html">
            <img src="static/img/logo.gif" alt=""
          /></a>
          <h1>订单详情</h1>
        </div>
        <div class="header-right">
          <h3>欢迎<span th:text= "${session.loginUser.userName}"></span>光临书城</h3>
          <div class="order"><a href="protected/orderClient?method=toUserOrderPage">我的订单</a></div>
          <div class="destory"><a href="index.html">注销</a></div>
          <div class="gohome">
            <a href="index.html">返回</a>
          </div>
        </div>
      </div>
    </div>

    <div class="list" id="app">
      <div class="w">
        <table>
          <thead>
            <tr>
              <th>图片</th>
              <th>商品名称</th>
              <th>数量</th>
              <th>单价</th>
              <th>金额</th>
            </tr>
          </thead>

          <tbody>
            <tr th:each="item: ${orderItem}">
              <td>
                <img th:src="${item.imgPath}" alt="" />
              </td>
              <td th:text="${item.bookName}">教父</td>
              <td th:text="${item.itemCount}">1</td>
              <td th:text="${item.price}">22</td>
              <td th:text="${item.itemAmount}">22</td>
            </tr>
          </tbody>

        </table>
        <div class="footer">
          <div class="footer-left">
          <div class="footer-right">
            <div>共<span th:text="${totalCount}">3</span>件商品</div>
            <div class="total-price">总金额<span th:text="${totalAmount}">99.9</span>元</div>
            <button th:if="${orderStatus!=4}" th:onclick="'cancel('+${orderId}+')'" class="pay" style="margin-left: 825px;border: none;">退货</button>
          </div>
        </div>
      </div>
    </div>

    <div class="bottom">
      <div class="w">
        <div class="top">
          <ul>
            <li>
              <a href="">
                <img src="static/img/bottom1.png" alt="" />
                <span>大咖级讲师亲自授课</span>
              </a>
            </li>
            <li>
              <a href="">
                <img src="static/img/bottom.png" alt="" />
                <span>课程为学员成长持续赋能</span>
              </a>
            </li>
            <li>
              <a href="">
                <img src="static/img/bottom2.png" alt="" />
                <span>学员真是情况大公开</span>
              </a>
            </li>
          </ul>
        </div>
        <div class="content">
          <dl>
            <dt>关于我们</dt>
            <dd>教育理念</dd>
            <!-- <dd>名师团队</dd>
            <dd>学员心声</dd> -->
          </dl>
          <dl>
            <dt>资源下载</dt>
            <dd>视频下载</dd>
            <!-- <dd>资料下载</dd>
            <dd>工具下载</dd> -->
          </dl>
          <dl>
            <dt>加入我们</dt>
            <dd>招聘岗位</dd>
            <!-- <dd>岗位介绍</dd>
            <dd>招贤纳师</dd> -->
          </dl>
          <dl>
            <dt>联系我们</dt>
            <dd>https://www.drimwai.com</dd>
            <dd></dd>
          </dl>
        </div>
      </div>
      <div class="down">
        Drimwai's Bookstore.Copyright ©2021
      </div>
    </div>
    </div>

    <script>
      //点击发货
      function cancel(orderId) {
        if (!confirm("你确定退货吗?")) {
          return;
        }
        $.get("http://localhost:8080/bookstore/protected/orderClient", {
          orderId: orderId,
          method: 'orderCancel'
        }, function() {
          alert("退货成功");
          document.querySelector('#pay').innerHTML='已退货';
        })
      }
    </script>
  </body>
</html>
